<template>
  <!--自定义查询区域-->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery" style="width: 100%">
      <a-row :gutter="10" type="flex">
        <a-col flex="240px">
          <a-form-item label="名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input placeholder="" v-model:value="queryParam.areaName"></a-input>
          </a-form-item>
        </a-col>
        <a-col flex="auto" style="float:right; width:150px; ">
            <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
              <a-button type="primary" @click="handleCreate" preIcon="ant-design:plus-outlined" class="ml-8px" color="success"> 新增 </a-button>
              <!--a-button type="primary" @click="handleUpdate" preIcon="ant-design:plus-outlined" class="ml-8px"> 更新 </a-button-->
            </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <BasicTable @register="registerTable" @expand="expandNode" :indentSize="10">
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>

  <Cooperator @register="registerModal" @success="handleSuccess"/>
</template>

<script lang="ts" setup name="cooperator-index">
import { BasicTable, TableAction, ActionItem } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { columns, searchFormSchema } from "./data";
import { treeGrid, cooperatorDelete, updateBatchOrders } from "./api";
import { nextTick, provide, reactive, toRaw } from "vue";

import Cooperator from './components/Cooperator.vue'

const queryParam = reactive<any>({});

// 列表页面公共参数、方法
const { prefixCls, tableContext } = useListPage({
  tableProps: {
    rowKey: 'id',
    api: treeGrid,
    columns: columns,
    size: "small",
    pagination: false,
    isTreeTable: true,
    striped: true,
    useSearchForm: false,
    bordered: true,
    showTableSetting: false,
    onExpand: expandNode,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    actionColumn: {
      width: 120
    }
  }
});

provide('prefixCls', prefixCls)

//注册table数据
const [registerTable, { reload, setProps, expandAll, collapseAll }] = tableContext;

function handleSuccess() {
  searchQuery();
}

/** 点击展开图标时触发 */
async function expandNode(expanded, record) {
  // // 判断是否是展开状态
  // if (expanded) {
  //   // 判断子级的首个项的标记是否是“正在加载中”，如果是就加载数据
  //   if (record.children && record.children[0].isLoading === true) {
  //
  //   }
  //   treeGrid(record).then(dataSource => {
  //     // 处理好的数据可直接赋值给children
  //     if (dataSource.length === 0) {
  //       record.children = null
  //     } else {
  //       record.children = dataSource
  //     }
  //   })
  // }

  if (expanded && record.isLeaf && record.children.length === 0) {
    record.children = await treeGrid({ parent_id: record.id })
  }
}


//-----------------
//-----自定义查询----begin--------

function searchQuery() {
  setProps({searchInfo:toRaw(queryParam)});
  nextTick(collapseAll);
  reload();
}

function searchReset() {
  Object.assign(queryParam, {});
  reload();
}

//---------------
// 注册 modal
const [registerModal, { openModal }] = useModal()
/**
 * 新增事件
 */
function handleCreate() {
  openModal(true, { isUpdate: false });
}

function handleEdit(record) {
  openModal(true, { record, isUpdate: true });
}

async function handleDelete(record) {
  await cooperatorDelete({id: record.id}, handleSuccess);
}

async function handleUpdate() {
  await updateBatchOrders();
}

/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: "编辑",
      onClick: handleEdit.bind(null, record)
    },
    {
      color: "error",
      label: "删除",
      onClick: handleDelete.bind(null, record)
    }
  ];
}
</script>


<style lang="less">


</style>
